<%--
  Created by IntelliJ IDEA.
  User: 27662
  Date: 2024/9/2
  Time: 15:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>科室人数</title>
    <script src="../static/js/echarts.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #fff;
            color: #333;
        }

        header {
            background-color: #00aef0;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }

        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
        }

        nav ul li {
            margin: 0 10px;
        }

        nav ul li a {
            color: #fff;
            text-decoration: none;
            font-weight: bold;
        }

        main {
            padding: 20px;
        }
        footer {
            text-align: center;
            padding: 10px 0;
            background-color: #f8f9fa;
            border-top: 1px solid #e9ecef;
        }
    </style>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Medicamp Responsive Bootstrap Template">
    <meta name="keywords" content="Pixel">
    <meta name="author" content="rkwebdesigns">
    <!-- Site Title   -->
    <title>首页</title>
    <!-- Bootstrap -->
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/bootstrap-dropdownhover.min.css" rel="stylesheet">
    <!-- Fonts Awesome -->
    <link href="${pageContext.request.contextPath}/static/css/font-awesome.min.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,200,300,100,500,600,700,800,900' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400" rel="stylesheet">
    <!-- animate Effect -->
    <link href="${pageContext.request.contextPath}/static/css/animate.css" rel="stylesheet">
    <!-- Main CSS -->
    <link href="${pageContext.request.contextPath}/static/css/style.css" rel="stylesheet">
    <!-- Responsive CSS -->
    <link href="${pageContext.request.contextPath}/static/css/responsive.css" rel="stylesheet">
</head>
<body>
<header id="header" class="head">
    <div class="top-header">
        <div class="container">
            <div class="row ">
                <ul class="contact-detail2 col-md-6 pull-left">
                    <li> <i class="fa fa-mobile" style="color: white"></i><font color="white">联系我们 +86 4004008299 </font></li>
                </ul>
                <div class="social-links col-md-6 pull-right">
                    <ul class="social-icons pull-right">
                        <li> <i class="fa fa-envelope-o" style="color: white"></i><font color="white"> yiliaojiankang@gmail.com </font></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <nav class="navbar navbar-default navbar-menu">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">
                    <div class="logo-text"><span><samp>医</samp>医疗</span>健康系统</div>
                </a>
            </div>
            <form action="${pageContext.request.contextPath}/userInfo/parseId.do?id=${id}" method="post">
                <input type="hidden" name="id" value="${id}">
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" data-hover="dropdown" data-animations="fadeIn">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="${pageContext.request.contextPath}/userInfo/parseId.do?id=${id}">首页</a></li>
                        <li><a href="${pageContext.request.contextPath}/doctor/findDoctorsKe2.do?id=${id}">专家介绍</a></li>
                        <li><a href="${pageContext.request.contextPath}/department/findAll.do?id=${id}">体检</a></li>
                        <li><a href="${pageContext.request.contextPath}/register/findPatientById.do?id=${id}">挂号</a></li>
                        <li><a href="${pageContext.request.contextPath}/admin/echarts.do">可视化</a></li>
                        <li><a href="${pageContext.request.contextPath}/messageList/messageFindAll2.do">公告</a></li>
                        <li><a href="${pageContext.request.contextPath}/userInfo/findUserById.do?id=${id}">个人中心</a></li>
                    </ul>
                </div>
            </form>
        </div>
    </nav>
</header>
<center><h1>Echarts图表</h1></center>
<main>
    <div style="display: flex;margin: 30px auto">
        <div id="main" style="flex:1;width: 400px ;height:400px; margin-left: 10px"></div>
        <div id="main2" style="flex:1;width: 400px ;height:400px; margin-left: 10px"></div>
        <div id="main3" style="flex:1;width: 400px ;height:400px; margin-left: 10px"></div>
    </div>
</main>
<footer>
    <p>版权所有 &copy; 2024 医疗管理平台</p>
</footer>
<section id="section10" class="section-10-background">
    <div class="container">
        <div class="row">
            <div class="col-md-9 col-lg-9">
                <div class="section-10-box-text-cont">
                    <h3>We Are Ready to Check Your Health,<span class="color-yellow">  Call : +86-400-400-8299</span></h3>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="footer-bottom" class="footer-bottom">
    <div class="container">
        <div class="row">
            <div class="col-md-9 col-lg-9">
                <div class="copyright">Copyright &copy; 2024.Company name All rights reserved.</div>
            </div>
        </div>
    </div>
</section>
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/jquery.plugin.min.js"></script>
<script src="../static/js/jquery.isotope.min.js"></script>
<script src="../static/js/jquery.magnific-popup.min.js"></script>
<script src="../static/js/bootstrap-dropdownhover.min.js"></script>
<script src="../static/js/wow.min.js"></script>
<script src="../static/js/waypoints.min.js"></script>
<script src="../static/js/jquery.counterup.min.js"></script>
<script src="../static/js/main.js"></script>
</body>
<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var myChart3 = echarts.init(document.getElementById('main3'));
    var names=[];
    var nums=[];

    var numList=${numList};
    var paList=${paList};
    var json1=${json1};

    for (var i = 0; i < numList.length; i++) {
        names.push({value:numList[i].num,name:numList[i].name})
    }
    // console.log(numList)
    // console.log(paList)
    console.log(json1)

    option = {
        title: {
            text: '患者所在科室及人数'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '患者科室信息',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: names
            }
        ]
    };

    //柱状图
    var names2=[];
    var nums2=[];
    // for (var i = 0; i < json1.length; i++) {
    //     names2.push(json1[i].value)
    //     nums2.push(json1[i].key)
    // }
    // for (var key in json1) {
    //     // 检查该属性是否是json1对象自身的属性，而不是原型链上的属性
    //     if (json1.hasOwnProperty(key)) {
    //         // 访问并打印键和对应的值
    //         names2.push(key)
    //         nums2.push(json1[key])
    //     }
    // }
    // console.log(names2)

    // 提取键并排序
    // Object.keys(json1)：获取 json1 对象中所有的键，返回一个包含这些键的数组。
    // .sort(function(a, b) { ... })：对这些键进行排序。

    var keysSorted = Object.keys(json1).sort(function(a, b) {
        // 将键拆分为数字并比较
        // a.split('-')：将键 a 按照 '-' 分割成一个数组。
        // .map(Number)：将分割后的每一部分转换为数字。假设键是 '2024-09'，那么 partsA 将是 [2024, 9]。
        var partsA = a.split('-').map(Number);
        var partsB = b.split('-').map(Number);
        // 如果起始数字相同，则比较结束数字  partsB[0] - partsA[0]>0 partsB[0]排在前面
        return partsA[0] - partsB[0] || partsA[1] - partsB[1];
        // return partsB[0] - partsA[0] || partsB[1] - partsA[1];
    });
    // 使用排序后的键来遍历对象
    keysSorted.forEach(function(key) {
        // console.log(key + ": " + json1[key]);
        names2.push(key+'岁')
        nums2.push(json1[key])
    });
    // 指定图表的配置项和数据
    // var option2 = {
    //     title: {
    //         text: '患者年龄及人数'
    //     },
    //     tooltip: {},
    //     legend: {
    //         data: ['人数']
    //     },
    //
    //     xAxis: {
    //         // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    //         // data: ['衬衫', '羊毛衫', '雪纺衫']
    //         data: names2,
    //         axisLabel :{
    //             // interval:0
    //             interval: 0,//横轴信息全部显示
    //         },
    //     },
    //     yAxis: {
    //     },
    //     series: [
    //         {
    //             name: '人数',
    //             type: 'bar',
    //             // data: [5, 20, 36, 10, 10, 20]
    //             data: nums2
    //         }
    //     ]
    // };
    option2 = {
        title: {
            text: '患者年龄及人数'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            // data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
            data:names2
        },
        series: [
            {
                name: '人数',
                type: 'bar',
                // data: [18203, 23489, 29034, 104970, 131744, 630230]
                data: nums2
            },
        ]
    };
    // 扇形图
    var names3=[];
    for (var i = 0; i < paList.length; i++) {
        names3.push({value:paList[i].num,name:paList[i].name})
    }
    option3 = {
        title: {
            text: '患者男女比例',
            subtext: '0905',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '患者人数',
                type: 'pie',
                radius: '50%',
                data: names3,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    myChart2.setOption(option2);
    myChart3.setOption(option3);
</script>
</html>
